<template>
  <div id="h5-edit">
    <!-- header -->
    <el-header class="clear-ed">
      <index-header :options="optionsNotTp" :isEnterH5Edit="true"
      @preview="onPreview"
      @saveCover="onSaveCover"
      @setting="onSetting"></index-header>
    </el-header>
    <top></top>
    <main-content v-if="siteAttrs.h5Type == H5_TYPE.mobile"></main-content>
    <pc-content v-else-if="siteAttrs.h5Type == H5_TYPE.pc"></pc-content>
    <canvas-content v-else-if="siteAttrs.h5Type == H5_TYPE.canvas"></canvas-content>

    <!-- <img-cropper :dialogVisible="imgCropPop.isActive" :url="imgCropPop.url"></img-cropper> -->
    <!-- <edit-path-animate :dialogVisible="editPathAnimate.isActive"></edit-path-animate> -->
    <media-layout class="right-pop" v-if="mediaPop.isActive" :item="mediaPop.item" :mediaData="mediaData" :isPop="true"></media-layout>
    <!-- 作品设置 -->
    <setting v-if="bIsSettingShow" @close="click2ShowSetting"></setting>
    <site-preview :isVisible="sitePreview.isActive"></site-preview>

    <div class="page-confirm-con">
      <el-dialog title="提示" :show-close="false" v-model="isLeavePageInfo.isLeavePage" width="30%">
        <template #title>
          <span class="el-dialog__title">提示</span>
          <button type="button" class="el-dialog__headerbtn"  @click.stop="onLeaveClose(false)">
            <i class="el-dialog__close jy-icon-layer-closed"></i>
          </button>
        </template>
        <div>作品<span class="orange-color">尚未保存</span>，要保存此作品吗？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="info" @click.stop="onLeaveClose(false)">不保存</el-button>
            <el-button type="primary" @click.stop="onLeaveClose(true)">保存</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <div class="appkey-con">
      <el-dialog title="Appkey尚未设置" v-model="isDisplaySetAppkey">
        <p>AppKey设置 <span>（您使用了微博相关事件，因此需要设置appkey）</span>
        </p>
        <el-input @input="onAppkeyChange" v-model="siteAttrs.wb_appkey" :class="{'is-appkey-null': bIsAppkeyNull}"></el-input>
        <p class="app-key-info"><a target="_blank" href="https://open.xxx.com/connect" rel="noopener noreferrer">https://open.xxx.com/connect </a> 到此地址申请AppKey，如添加内部白<br>名单接口，请发邮件<a href="mailto:zhouheng1@staff.xxx.com"> zhouheng1@staff.xxx.com </a>（周恒）申请开通</p>
        <!-- <p><span>https://all.vic.sina.com.cn/wbhd/index.php</span>   到此地址申请AppKey</p> -->
        <el-button type="primary" @click.stop="onAppkeyClose" class="margin-top-20">确定</el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Top from '@/views/child/Top.vue'
import MainContent from '@/views/child/MainContent.vue'
import PcContent from '@/views/child/PcContent.vue'
import CanvasContent from '@/views/canvas/CanvasContent.vue'
import IndexHeader from '@/views/child/header/IndexHeader.vue'
import SitePreview from '@/views/child/SitePreview.vue'
import MediaLayout from '@/views/child/MediaLayout.vue'
import Setting from '@/views/child/Setting.vue'
import { mapState, mapActions } from 'vuex'
import { MEDIAS } from '@/common/const'
import { H5_TYPE } from '@/common/const-dif'
import { EventBus } from '@/store/index'
import { reactive } from 'vue'

export default {
  name: 'h5Edit',
  setup () {
    const state =  reactive({
      bIsSettingShow: false,
      isSaveCover: true,
      isDisplaySetAppkey: false,
      bIsAppkeyNull: false,
    })
    const state_ = {
      H5_TYPE: H5_TYPE,
      MEDIAS: MEDIAS,
      optionsNotTp: {
        arrBtns: [0, 1, 1, 1, 0],
        transparent: false,
      },
    }
    _.merge(state, state_)
    return state
  },
  components: {
    Top,
    MainContent,
    PcContent,
    CanvasContent,
    IndexHeader,
    // ImgCropper,
    // EditPathAnimate,
    MediaLayout,
    Setting,
    SitePreview,
  },
  created() {
    // this.$store.dispatch("user/getUserInfo");
    let isDisplayClickStatics = false
    this.$store.commit("user/updataIsDisplayClickStatics", { isDisplayClickStatics })

    EventBus.$on('refreshMediaPop', this.onRefreshMediaPop);
  },
  computed:{
    ...mapState({
      imgCropPop: (state) => state.imgCropPop,
      // editPathAnimate: (state) => state.editPathAnimate,
      isLeavePageInfo: (state) => _.cloneDeep(state.isLeavePageInfo),
      mediaPop: (state) => state.mediaPop,
      mediaData: (state) => state.user.mediaAllData[state.mediaPop.type],
      sitePreview: (state) => state.user.sitePreview,
      siteAttrs: (state) => state.components.attrs,
      id: (state) =>  state.components.id,
      controls: (state) => state.wbComponents.controls
    }),
  },
  methods: {
    ...mapActions({
      savePageDatas: "components/savePageDatas",
      setActivePage: "components/setActivePage",
      setSitePreview: 'user/setSitePreview',
      updateSiteAttrs: "components/updateSiteAttrs",
    }),
    click2ShowSetting(bool) {
      this.bIsSettingShow = bool;
    },
    onLeaveClose(isSave){
      if(isSave){
        this.savePageDatas();
      }
      this.isLeavePageInfo.isLeavePage = false;
      let path = this.isLeavePageInfo.path;
      this.isLeavePageInfo.path = '';
      this.$store.commit("updateIsLeavePage", this.isLeavePageInfo)

      this.$nextTick(() => {
        this.$router.push(path);
      })
    },
    onSetting() {
      // this.$emit('setting', true);
      this.bIsSettingShow = true;
      this.setSitePreview({isEditSite: true})
    },
    onPreview(){
      let num = 0
      _.forEach(this.controls, (controls) => {
        let len = _.size(controls);
        if(len > 0){
          if(len == 1 && (controls.submit || controls.smsVerification || controls.timer)){
            //提交不需要appkey
          }else{
            num += 1
          }
        }
      })
      if(num > 0 && this.siteAttrs.wb_appkey.length <= 0){
        this.isDisplaySetAppkey = true;
      }else{
        this.isDisplaySetAppkey = false;
        this.savePageDatas(() => {
          this.setSitePreview({isEditSite: true})
          this.$store.dispatch("user/getSiteData", { item: {site_id: this.id}, isTempPreviewUrl: true });
        });
      }
    },
    onSaveCover() {
      this.$store.commit("components/deactiveCurrentComponent")
      this.onCover()
    },
    onCover(){
      if(this.isSaveCover){
        EventBus.$emit("sitethumb");
        this.isSaveCover = false;

        window.setTimeout(function(){
          this.isSaveCover = true;
        }.bind(this), 5000);
      }
    },
    onAppkeyChange(){
      this.updateSiteAttrs(this.siteAttrs);
      this.bIsAppkeyNull = false;
    },
    onAppkeyClose(){
      if(this.siteAttrs.wb_appkey.length > 0){
        this.savePageDatas();
      }else {
        this.bIsAppkeyNull = true;
        return;
      }
      this.isDisplaySetAppkey = false;
    },
    onRefreshMediaPop() {
      this.$nextTick(() => {
        this.$forceUpdate();
      })
    }
  },
  beforeUnmount(){
    this.setActivePage({id:-1});
    EventBus.$off('refreshMediaPop', this.onRefreshMediaPop);
  },
}
</script>
<style lang="scss">
@import '@/assets/css/edit.scss';
#h5-edit {
	width: 100%;
	height: 100%;
}
.right-pop{
  position: absolute;
  right: 306px;
  top: 100px;
  z-index: 1000;
  padding: 10px;
  border: 1px solid #EDEFF2;
  box-shadow: 0 4px 4px 0 rgba(18, 123, 255, 0.1);
  background-color: #ffffff;
}
</style>
